<template>
  <div class="weekly-table">
    <el-table
      :data="dataSource"
      :border="printing"
      style="width: 100%"
      @selection-change="handleSelectionChange"
      :class="printing ? 'tablePrinting' : ''"
    >
      <el-table-column v-if="!printing" type="selection" width="30"></el-table-column>
      <!-- <el-table-column align="center" type="index" label="序号" width="50"></el-table-column> -->
      <el-table-column
        :label="columnNames[0]"
        header-align="center"
        min-width="250"
      >
        <template slot-scope="{ row }">
          <span v-if="printing" class="content">{{ row.content_1 }}</span>
          <el-input
            v-else
            type="textarea"
            :autosize="{ minRows: 4, maxRows: 4 }"
            placeholder="说点什么"
            v-model="row.content_1"
          />
        </template>
      </el-table-column>
      <el-table-column
        :label="columnNames[1]"
        header-align="center"
        min-width="250"
      >
        <template slot-scope="{ row }">
          <span v-if="printing" class="content">{{ row.content_2 }}</span>
          <el-input
          v-else
            type="textarea"
            :autosize="{ minRows: 4, maxRows: 4 }"
            placeholder="说点什么"
            v-model="row.content_2"
          />
        </template>
      </el-table-column>
      <el-table-column
        :label="columnNames[2]"
        header-align="center"
        min-width="250"
      >
        <template slot-scope="{ row }">
          <span v-if="printing" class="content">{{ row.content_3 }}</span>
          <el-input
          v-else
            type="textarea"
            :autosize="{ minRows: 4, maxRows: 4 }"
            placeholder="说点什么"
            v-model="row.content_3"
          />
        </template>
      </el-table-column>
      <el-table-column
        v-if="reportType === 'keyWork'"
        :label="columnNames[3]"
        header-align="center"
        min-width="250"
      >
        <template slot-scope="{ row }">
          <span v-if="printing" class="content">{{ row.content_4 }}</span>
          <el-input
          v-else
            type="textarea"
            :autosize="{ minRows: 4, maxRows: 4 }"
            placeholder="说点什么"
            v-model="row.content_4"
          />
        </template>
      </el-table-column>
    </el-table>
    <div v-if="!printing" style="margin-top: 10px">
      <el-button
        @click="onAdd"
        type="text"
        size="mini"
        icon="el-icon-plus"
        >添加</el-button>
      <el-popconfirm
        v-if="multipleSelection.length"
        placement="top"
        :title="multipleSelection.length == dataSource.length ? '选择所有项后将删除此年报！' : '确定要删除选中的内容吗？'"
        @confirm="() => onDelete(multipleSelection)"
      >
        <el-button
          slot="reference"
          type="text"
          icon="el-icon-delete"
          size="mini"
          >删除</el-button>
      </el-popconfirm>
      <el-popconfirm
        placement="top-start"
        title="确认已核对填报日期无误，提交成功后将不能修改填报日期！"
        style="float: right;"
        @confirm="onSubmit"
      >
        <el-button
          slot="reference"
          type="primary"
          size="mini"
          >提交</el-button>
      </el-popconfirm>
    </div>
  </div>
</template>
<script>
import { groupBy } from "@/utils/index.js";
export default {
  props: {
    dataSource: {
      type: Array,
      default: () => [],
    },
    reportType: {
      type: String
    },
    printing: {
      type: Boolean
    },
    onSubmit: {
      type: Function,
    },
    onAdd: {
      type: Function,
    },
    onDelete: {
      type: Function,
    },
  },
  components: {
    WeeklyReportTable: () => import("./WeeklyReportTable.vue"),
    Popconfirm: () => import('@/components/Popconfirm/index.vue')
  },
  watch: {
    weekRecords: {
      handler(newValue) {
        const list = this.groupWeekRecordsByUser(newValue);
        this.weeklyReportDatas = list;
      },
      immediate: true,
      deep: true,
    },
    reportType: {
      handler(type) {
        if (type === 'person'){
          this.columnNames = ['最有成效的三项特色亮点工作', '最不满意或有差距的三项工作及原因分析', '下步工作打算']
        } else if(type === 'unit') {
          this.columnNames = ['最有成效的三项特色亮点工作', '问题较多、差距较大的三项工作及原因分析', '整改措施及下步工作目标']
        } else {
          this.columnNames = ['工作推进情况', '取得的成效', '存在的主要问题及原因分析', '整改措施及下步工作目标']
        }
      },
      immediate: true,
      deep: true,
    }
  },

  data() {
    return {
      weeklyReportDatas: [],
      multipleSelection: [],
      columnNames: []
    };
  },
  mounted() {},
  methods: {
    groupWeekRecordsByUser(list = []) {
      if (!list.length) return [];
      // 按用户ID分组
      const groupUser = groupBy(list, "user");
      return Object.keys(groupUser).map((key) => {
        const records = groupUser[key];
        const { user, username } = records[0];
        return { user, username, records };
      });
    },
    // 表格多选
    handleSelectionChange(val) {
      this.multipleSelection = val;
    }
  },
};
</script>
<style lang="scss">
.weekly-table {
  .box-card {
    margin-bottom: 20px;
    .header {
      h1 {
        text-align: center;
      }
    }
  }
  .tablePrinting {
    .cell {
      color: #000;
      font-weight: 400;
    }
  }

  .content {
    white-space: pre-wrap;
  }
}
</style>